<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!--
    src：要播放视频的URL
    poster:海报  url图片路径
    video的9种属性：
            1：src要播放视频的url，由于没有一种文件格式和解码方式组合适用于所有的浏览器，所以为了兼容，一个视频文件多种格式
            2：width height：指定是标签大小，不是视屏大小，视屏的大小是由拍摄的设备决定的
            3：controls向用户显示控件，例如暂停，播放，声音大小，全屏，进度等
            4：autoplay当 视频文件就绪后就会自动播放，但是Chrome不支持该属性，IE和火狐支持
            5：loop：当视频文件播放完毕后，自动开始再次播放。
            6：muted：是否静音
            7：poster值为url，下载显示的图像，或者yoghurt点击播放按钮显示的图像，当网络不好时为了不影响用户体验，显示图片
            8：preload规定在页面加载后是否加载视频（如果设置了autoplay属性后忽略该属性）可能值：
                                  auto：当页面加载后载入整个视频
                                  metadata：当页面加载后之载入元数据
                                  none：当页面加载后不载入视频

  -->
  <video width="250px" height="200px" controls autoplay loop preload="load" muted poster="">
    <source src="videos/1.mp4">
    <source src="videos/2.mp4">
    您的浏览器不支持video标签请更换浏览器！！！
  </video>
</body>

</html>
